<script setup>
import { ref, computed, onMounted } from 'vue'
import AnnouncementList from '@/components/AnnouncementList.vue'

// 当前激活的一级标签
const activeTab = ref('academic')

// 当前激活的部门（仅用于部门通知）
const activeDepartment = ref('1')

// 所有公告数据（从 localStorage 加载）
const allNotices = ref([])

// 页面加载时从 localStorage 读取数据
onMounted(() => {
  const saved = localStorage.getItem('announcements')
  if (saved) {
    allNotices.value = JSON.parse(saved)
  } else {
    // 初始示例数据（可选）
    allNotices.value = [
      { id: 1, date: '2025-07-04', title: '关于文清楼七楼自修室使用功能调整的通知', type: 'park' },
      { id: 2, date: '2025-07-04', title: '关于做好2025年度大学生创新训练项目相关工作的通知', type: 'park' },
      { id: 3, date: '2025-06-30', title: '关于组织开展2025年暑假学生劳动教育实践活动的通知', type: 'dept', department: '1' },
      { id: 4, date: '2025-06-24', title: '关于做好2025年暑假学生宿舍管理工作的通知', type: 'dept', department: '2' }
    ]
    localStorage.setItem('announcements', JSON.stringify(allNotices.value))
  }
})

// 【园区通知】筛选所有 type === 'park' 的公告
const filteredParkNotices = computed(() => {
  return allNotices.value
      .filter(item => item.type === 'park')
      .sort((a, b) => new Date(b.date) - new Date(a.date)) // 按日期倒序
})

// 【部门通知】获取指定部门的公告
function getDepartmentList(deptId) {
  if (!deptId) return []
  return allNotices.value
      .filter(item => item.type === 'dept' && item.department === deptId)
      .sort((a, b) => new Date(b.date) - new Date(a.date))
}

// 切换部门时的回调（可扩展）
function handleDepartmentChange(value) {
  // 可在此添加日志、加载动画等
  console.log('切换到部门:', value)
}

// 更多链接
const moreLink = computed(() => {
  return activeTab.value === 'academic'
      ? '/academic-details'
      : '/student-affairs-details'
})
</script>

<template>
  <div class="announcement-board">
    <!-- 标题 -->
    <div class="header">
      <span class="title">通知公告</span>
      <el-link :href="moreLink" target="_blank" class="link-style">
        更多
      </el-link>
    </div>

    <!-- 一级标签页 -->
    <el-tabs v-model="activeTab" class="tabs">
      <!-- 园区通知 -->
      <el-tab-pane label="园区通知" name="academic">
        <AnnouncementList :list="filteredParkNotices" />
      </el-tab-pane>

      <!-- 部门通知 -->
      <el-tab-pane label="部门通知" name="studentAffairs">
        <div class="announcement-board-layout">
          <!-- 下拉选择部门 -->
          <div class="department-filter">
            <el-select
                v-model="activeDepartment"
                placeholder="请选择部门"
                class="department-select"
                clearable
                @change="handleDepartmentChange"
            >
              <el-option
                  v-for="n in 10"
                  :key="n"
                  :label="`部门 ${n}`"
                  :value="String(n)"
              />
            </el-select>
          </div>

          <!-- 公告内容列表 -->
          <div class="department-content">
            <AnnouncementList :list="getDepartmentList(activeDepartment)" />
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<style scoped>
.announcement-board {
  width: 100%;
  max-width: 1600px;
  margin: 30px auto;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  background: #ffffff;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
}

.header {
  padding: 16px 24px;
  border-bottom: 1px solid #e4e7ed;
  background: #f5f7fa;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.title {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

.link-style {
  font-size: 16px;
  color: #409eff;
}

.link-style:hover {
  color: #66b1ff;
}

.tabs {
  padding: 0 24px 16px;
}
:deep(.el-tabs__nav-wrap::after) {
  height: 1px;
  background-color: #e4e7ed;
}
:deep(.el-tabs__item) {
  font-size: 15px;
  color: #606266;
  padding: 0 16px;
}
:deep(.el-tabs__item.is-active) {
  color: #409eff;
  font-weight: 600;
}
:deep(.el-tabs__active-bar) {
  background-color: #409eff;
}

.announcement-board-layout {
  display: flex;
  flex-direction: column;
  min-height: 300px;
  margin-top: 16px;
}

.department-filter {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.department-select {
  width: 180px;
  font-size: 14px;
  border-radius: 4px;
}

.department-content {
  flex: 1;
  min-width: 0;
  padding: 0 8px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
</style>
